---
id: unit1
title: 主要内容
---

## 微前端实现方式对比
1. Iframe 
    - 优势
        - 技术成熟
        - 支持页面嵌入
        - 天然支持运行沙箱隔离、独立运行
    - 劣势
        - 页面之间可以是不同的域名
        - 需要对应的设计一套应用通讯机制，如何监听、传参格式等内容
        - 应用加载、渲染、缓存等体系的实现
2. web component
    - 优势
        - 支持自定义元素
        - 支持shadow dom，并可通过关联进行控制
        - 支持模板template和插槽slot，引入自定义组件内容
    - 劣势
        - 接入微前端需要重写当前项目
        - 生态系统不完善，技术过新容易出现兼容性问题
        - 整体架构设计复杂，组件与组件之间拆分过细时，容易造成通讯和控制繁琐
3. 自研框架
    - 优势
        - 高度定制化，满足需要做兼容的一切场景
        - 独立的通信机制和沙箱运行环境，可解决应用之间相互影响的问题
        - 支持不同技术栈子应用，可无缝实现页面无刷新渲染
    - 劣势
        - 技术实现难度较高
        - 需要设计一套定制的通信机制
        - 首次加载会出现资源过大的情况
4. 最终实现 一自研框架
    - 路由分发式
    - 主应用控制路由匹配和子应用加载，共享依赖加口载
    - 子应用做功能，并接入主应用实现主子控制和联动
## 路由拦截

在主应用里通过路由拦截来监听 url 变化后触发对应的子应用。

1. 首先是重写了原生的，pushState， replaceState，onpopstate 方法，保留了它们原有的功能并向里面添加了自定义的事件。
2. 自定义事件的内容是：先判断子应用是否切换，如果切换就去执行子应用的生命周期。

## 环境变量设置

### window.__MICRO_WEB__ 
值类型 boolean  
作用：在子应用window对象上，判断当前环境是否处于微应用。

### window.__CURRENT_SUB_APP__ 

值类型 string  
它的值等于当前子应用配置项里面的 activeRule 选项。

### window.__ORIGIN_APP__ 
值类型 string  
作用：记录着上一个app的信息。
``` window.__ORIGIN_APP__  ```  和  ``` window.__CURRENT_SUB_APP__  ```  初始值一样。  

当子应用进行切换时通过 ``` window.__ORIGIN_APP__  ```  找到上一个app的信息。

### window.__CURRENT_HASH__ 
值类型 string  
当前应用的hash值



## 主应用的生命周期

在这里给主应用写了 3 个生命周期函数，在不同的阶段会被触发。分别是 beforeLoad、mounted、destoryed。

## 子应用的生命周期

在这里给子应用写了 3 个生命周期函数，在不同的阶段会被触发。分别是 beforeLoad、mounted、destoryed。

### ** beforeLoad: **

- 首先会执行主应用的 beforeLoad 函数。
- 解析子应用里的 script 并放在沙箱里进行执行。

### ** mounted：**

- 执行主应用的mounted函数

### ** destoryed：**

- 先对自己进行卸载，再去执行主应用的 destoryed 函数。

:::info
** 一个子应用切换会发生如下事情：**

1. 首先获取上一个子应用。以备切换后对上一个子应用进行注销操作。
2. 获取要跳转的目标子应用，执行子应用的beforeLoad，然后再执行子应用的mounted函数。
:::


## 加载、解析、执行 JS

通过 fetch 获取整个页面的 DOM 从中提取 script 的 src 链接 和 script 块。



## 沙箱

### 快照沙箱
优点：支持度高。
缺点：性能差，不支持多实例（同时一个页面只能显示一个子应用）。
应用场景：老版本的浏览器。
### 代理沙箱

### ShadowRealm API

## css样式 隔离
### minicss
### css module  
webpack提供的css 命名空间的功能(需做webpack配置)
### shadow dom

## 应用通信

### 父子通信

### 兄弟通信

### 全局状态管理

## 性能优化

### 应用缓存

### 预加载子应用
